<template>
    <div>
        
        <el-card>
            <div>
                <el-form>
                    <el-form-item label="搜索">
                        <el-input class="input" placeholder="输入比赛名称" v-model="key" clearable @clear="getCompetitionList()"></el-input>
                        <el-button type="primary" class="btn" icon="el-icon-search" @click="searchCompetition">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="competitionList"
                    border
                    style="width: 100%"
                >
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="createdAt"
                        label="发布时间"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="competition_name"
                        label="比赛名称"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="competition_type"
                        label="比赛类型"
                        width="width">
                    </el-table-column>
                     <el-table-column
                        prop="tag"
                        label="比赛进程"
                        width="100"
                        :filters="[
                            { text: '即将报名', value:0}, { text: '报名中', value:1 },
                            { text: '比赛中', value:2}, { text: '比赛截止', value:3},{text: '即将开赛', value:4}]"
                        filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.tag==0">即将报名</el-tag>
                            <el-tag type="" v-show="scope.row.tag==1">报名中</el-tag>
                            <el-tag type="warning" v-show="scope.row.tag==2">比赛中</el-tag>
                            <el-tag type="danger" v-show="scope.row.tag==3">比赛截止</el-tag>
                            <el-tag type="info" v-show="scope.row.tag==4">即将开赛</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="User.username"
                        label="发布者账号"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="当前状态"
                        align="center"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row.status==0?'正常':'已删除'}}
                        </template> 
                    </el-table-column>
                    <el-table-column
                        prop="number"
                        label="已报名人数"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        height="400px"
                        width="width">
                        <template slot-scope="scope">
                            <div v-show="scope.row.status==0">
                                <el-button type="text" class="btn" v-show="scope.row.tag!=0&&scope.row.tag!=1" @click="isexport(scope.row)">导出</el-button>
                                <el-button type="text" class="btn" @click="checkUser(scope.row.uid)">搜索</el-button>
                            </div>
                            <div v-show="scope.row.status==-1">
                                <span>已删除</span>
                            </div>
                        </template> 
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @prev-click="gotoPrePage"
                    @next-click="gotoNextPage"
                    :total="allpages">
                </el-pagination>
            </div>
        </el-card>
       
       <el-dialog
        title="搜索参赛用户"
        :visible.sync="dialog"
        width="width">
        <div>
            <el-form ref="form" label-width="80px">
                <el-form-item label="搜索">
                    <el-input v-model="user_key" placeholder="输入参赛用户姓名、账号、邮箱" class="input" clearable @clear="searchUser"></el-input>
                    <el-button type="primary" icon="el-icon-search" class="btn" @click="searchUser">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table
                :data="user_list"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="姓名"
                    align="center"
                    width="width">
                </el-table-column>
                <el-table-column
                    prop="school"
                    label="来自学校"
                    align="center"
                    width="width">
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号"
                    align="center"
                    width="width">
                </el-table-column>
                <el-table-column
                    prop="email"
                    label="邮箱"
                    align="center"  
                    width="width">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="操作"
                    align="center"  
                    width="width">
                    <template slot-scope="scope">
                        <el-button type="text" v-show="scope.row.status==0" @click="isCancel(scope)">取消报名</el-button>
                        <span v-show="scope.row.status==-1">已取消</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div slot="footer">
            <el-button @click="dialog = false">取 消</el-button>
            <el-button type="primary" @click="dialog = false">确 定</el-button>
        </div>
       </el-dialog>
    </div>
</template>

<script>
import {getCompetitionList,searchCompetition,searchUser,exportFile,cancelEntry} from '@/api/competition'
export default {
    name:'registration',
    data() {
        return {
            competitionList:[],//竞赛列表
            page:1,//当前页数
            allpages:1,//总共的页数
            key:'',//搜索关键词
            status:0,//记录当前网页状态，0表示展示状态，1表示搜索状态
            dialog:false,
            user_key:'',//搜索框的关键字
            user_list:[],//搜索出的用户列表
            competition_uid:'',//存储当前选中的比赛uid
        }
    },
    mounted(){
        this.getCompetitionList()
    },
    watch:{
        //当搜索框内容为空时触发
        key(newValue){
            if(newValue==''){
                this.status = 0
                this.getCompetitionList()
            }
        }
    },
    methods:{
        //是否取消报名
        isCancel(info){
            this.$confirm('取消之后将不能恢复，是否取消该用户报名信息？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.cancelEntry(info)
                }).catch(() => {
                    this.$message({
                       type:'warning',
                       showClose:true,
                       duration:1000,
                       message:'取消操作'
                    })
            })
        },
        //取消报名
        cancelEntry(info){
            cancelEntry({
                entry_uid:info.row.uid
            }).then(res=>{
                if(res.status==200){
                    this.$message({
                       type:'success',
                       showClose:true,
                       duration:1000,
                       message:'操作成功'
                    })
                    this.user_list[info.$index].status = -1
                }else{
                    this.$message({
                       type:'error',
                       showClose:true,
                       duration:1000,
                       message:'数据更新失败'
                    })
                }
            })
        },
        //搜索指定比赛的参赛人员
        searchUser(){
            searchUser({
                key:this.user_key,
                competition_uid:this.competition_uid
            }).then(res=>{
                this.user_list = res.data.info
            })
        },
        //是否导出文件
        isexport(competition){
            this.$confirm('将导出报名成功的人员名单，是否确认导出？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.exportFile(competition)
                }).catch(() => {
                    this.$message({
                       type:'warning',
                       showClose:true,
                       duration:1000,
                       message:'取消操作！'
                    })
            })
        },
        //导出报名信息文件
        exportFile(competition){
            exportFile({
                competition_uid:competition.uid
            }).then(res=>{
                let url = window.URL.createObjectURL(res.data)
                let a =document.createElement('a')
                a.href = url
                a.download = competition.competition_name+'报名表'
                a.click()
                window.URL.revokeObjectURL(url)
            })
        },
        //点击查看用户
        checkUser(competition_uid){
            this.competition_uid = competition_uid
            this.dialog = true
            this.searchUser()
        },
        //搜索竞赛
        searchCompetition(){
            this.status = 1
            //初始化当前的页面
            this.page = 1
            if(this.key==''){
                this.$message({
                   type:'warning',
                   showClose:true,
                   duration:1000,
                   message:'搜索内容不能为空'
                })
                return
            }
            searchCompetition({
                key:this.key,
                page:this.page
            }).then(res=>{
                this.competitionList = res.data.info
                this.competitionList.forEach(item=>{
                    item.createdAt = this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm')
                    //对当前比赛状态进行处理
                    let now = this.$moment()
                    let applyStartDay = now.diff(item.regist_start_time,'minute')/60/24
                    let applyEndDay = now.diff(item.regist_end_time,'minute')/60/24
                    let raceStartDay = now.diff(item.race_start_time,'minute')/60/24
                    let raceEndDay = now.diff(item.race_end_time,'minute')/60/24
                    if(applyStartDay<0){
                        this.$set(item,'tag',0)
                    }else if(applyStartDay>0&&applyEndDay<0){
                        this.$set(item,'tag',1)
                    }else if(raceStartDay>0&&raceEndDay<0){
                        this.$set(item,'tag',2)
                    }else if(raceEndDay>0){
                        this.$set(item,'tag',3)
                    }else if(applyEndDay>0&&raceStartDay<0){
                        this.$set(item,'tag',4)
                    }
                })
                this.allpages = Math.ceil(res.data.number/10)
                console.log(this.allpages)
            })
        },
        //获取竞赛列表
        getCompetitionList(){
            //获取竞赛列表
            getCompetitionList({
                page:this.page,
            }).then(res=>{
                this.competitionList = res.data.info
                this.competitionList.forEach(item=>{
                    item.createdAt = this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm')
                    //对当前比赛状态进行处理
                    let now = this.$moment()
                    let applyStartDay = now.diff(item.regist_start_time,'minute')/60/24
                    let applyEndDay = now.diff(item.regist_end_time,'minute')/60/24
                    let raceStartDay = now.diff(item.race_start_time,'minute')/60/24
                    let raceEndDay = now.diff(item.race_end_time,'minute')/60/24
                    if(applyStartDay<0){
                        this.$set(item,'tag',0)
                    }else if(applyStartDay>0&&applyEndDay<0){
                        this.$set(item,'tag',1)
                    }else if(raceStartDay>0&&raceEndDay<0){
                        this.$set(item,'tag',2)
                    }else if(raceEndDay>0){
                        this.$set(item,'tag',3)
                    }else if(applyEndDay>0&&raceStartDay<0){
                        this.$set(item,'tag',4)
                    }
                })
                this.allpages = Math.ceil(res.data.number/10)
            })
        },
        // 用户点击下一页
        gotoNextPage(){
            this.page = this.page+1
            if(this.status==0){
                this.getCompetitionList()
            }else{
                this.searchCompetition()
            }
        },
        // 用户点击上一页
        gotoPrePage(){
            this.page = this.page-1
            if(this.status==0){
                this.getCompetitionList()
            }else{
                this.searchCompetition()
            }
        },
    }

}
</script>

<style lang="scss" scoped>
$themeColor:rgb(64, 158, 255);
$oneColor:rgb(0, 188, 212);//即将报名的状态
$twoColor:rgb(247, 184, 9);//比赛中的状态
//输入框
.input{
    width: 300px;
}
//按钮
.btn{
    margin-left: 15px;
}
//分页
.pagination{
    display: flex;
    margin-top: 20px;
    justify-content: center;
}
//删除按钮
.delete{
    margin-left: 10px;
}
</style>